<template>
    <div clas="xima">
        <header>
            <ol class="breadcrumb">
                <li><router-link to="/foreign">合作</router-link></li>
                <li><router-link to="/foreign">德国合作</router-link></li>
            </ol>
        </header>
        <div class="ximacontent">
            <div class="row">
                <div class="col-xs-12 col-md-8">
                  <div class="shawBox" v-for="(item,index) in outCoorList" :key="item" >
                    <img :src="item.url" alt="">
                    <p>{{item.name}}</p>
                  </div>
                </div>
                <div class="col-xs-6 col-md-4">
                    <div class="guide">
                        <div class="guideTop">
                            <ul>
                                <li>
                                    <router-link to="/foreign"><span>德国合作</span></router-link>
                                </li>
                                <hr class="simple"
                                    color="#6f5499" />
                                <li><router-link to="/domestic">国内合作</router-link></li>
                                <hr class="simple"
                                    color="#6f5499" />
                                <li><router-link to="/cooperate">合作伙伴</router-link></li>
                                <hr class="simple"
                                    color="#6f5499" />
                                <li><router-link to="/research">调研交流</router-link></li>
                            </ul>
                        </div>
                        <hr style="filter: alpha(opacity=100,finishopacity=0,style=2)"
                            width="80%"
                            color="#6f5499"
                            size="10" />
                        <div class="guideTip">
                            <p class="connect_h">联系我们</p>
                            <el-divider></el-divider>
                            <hr style="border-top:1px solid #ccc;" width="100%" color="#ccc" size=1>
                            <div><span>电话：861068005755,861068006083</span></div>
                            <div><span>Email: xmbj2005@163.com</span></div>
                            <div><span>邮箱: 492800904@qq.com</span></div>
                            <div>
                              <span>地址: 北京市西城区西直门外大街18号金贸大厦A座935</span>
                            </div>
                            <p>
                                <img src="../assets/code.jpg"
                                     alt="" />
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
   export default{
     data(){
       return{
        outCoorList:[
          {url:require("../assets/dg.jpg"),name:'德国医院协会'},
          {url:require("../assets/dg1.jpg"),name:'德国医药总会'},
          {url:require("../assets/dg2.jpg"),name:'德国富尔达大学'},
          {url:require("../assets/gj1.jpg"),name:'国家卫生健康委医院管理所'},
          {url:require("../assets/gj2.jpg"),name:'国家卫生健康委卫生事业发展中心'},
          {url:require("../assets/gj3.jpg"),name:'西安交通大学'},
        ],
       }
     },
     mthods:{

     }
   }
</script>
<style>
.ximacontent{
  margin:0 auto;
}
.shawBox{
    background:white; 
    box-shadow:4px 2px 6px #333333; 
    text-align:center;
}
img:hover{
   transform:scale(1.1);
}
.guide {
    width: 100%;
}
.guideTop {
    background-color: #0a77a0;
    margin-bottom: 1.875rem /* 30/16 */;
}
.guideTop ul {
    list-style-type: none;
    margin: 0;
}
.guideTop ul li a {
    color: #fff;
}
.guideTip .connect_h {
    font-size: 20px;
}
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media screen and (min-width: 992px){
  .shawBox{
    width:32.5rem /* 520/16 */;
    height:100%;
    margin: 3.125rem /* 50/16 */;
    float:left;
    padding:1.25rem /* 20/16 */;
  }
   .substance{
     width:100%;
   }
    .substance2,
    .substance3,
    .substance4 {
        float: left;
        width: calc(100% / 3);
    }
    .substance2 {
        border-right: 1px solid #ccc;
    }
    .substance4 {
        border-right: 1px solid #ccc;
    }
    .substance2 p:first-letter {
        font-size: 60px;
        float: left;
        padding-right: 6px;
        font-weight: bold;
        font-family: 黑体;
        color: #0a77a0;
    }
    .substance2 p {
        letter-spacing: 4px;
    }
    .substance3 img {
        text-align: center;
        margin: 0 auto;
        position: relative;
        left: 50%;
        transform: translateX(-50%);
    }
    .substance4 .areas {
        font-size: 20px;
        color: #0a77a0;
    }
    .substance4 p {
        font-size: 14px;
        letter-spacing: 4px;
        line-height: 25px;
    }
}
</style>
